<template>
  <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
    <el-card style="width: 95%">
      <template slot="header">
        <span>我的订单</span>
      </template>
      <div style="text-align: center;">
        <!-- 表格部分-->
        <template v-for="orderItem in orderList">
          <el-table
            :key="orderItem.order.orderId"
            v-loading="listLoading"
            :span-method="objectSpanMethod"
            :data="orderItem.products"
            :border="false"
            :header-cell-style="{background:'rgba(245,245,245)'}"
            fit
            highlight-current-row
          >
            <!-- 其他列的定义... -->
            <!--订单号直接再表头显示，内容显示图片和商品名-->
            <el-table-column align="center" :label="orderItem.order.orderDate">
              <template slot-scope="scope">
                <el-image :src="scope.row.product.productImageUrl" fit="cover" style="width: 50px; height: 50px;" />
              </template>
            </el-table-column>
            <el-table-column align="center" :label="'订单号:' + orderItem.order.orderId">
              <template slot-scope="scope">
                <span>{{ scope.row.product.productName }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="单价">
              <template slot-scope="scope">
                ¥ {{ scope.row.product.productPrice }}
              </template>
            </el-table-column>
            <!--数量后端未传值-->
            <el-table-column align="center" label="数量">
              <template slot-scope="scope">
                {{ scope.row.productNum }}
              </template>
            </el-table-column>
            <!--总金额-->
            <el-table-column align="center" label="总金额">
              <template>
                ¥ {{ orderItem.order.totalAmount }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="查看详情 >">
              <template>
                <span>{{ orderItem.order.orderStatus }}</span>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!-- 表格部分-->
      </div>
    </el-card>
  </div>
</template>

<script>
import { black, blue, red } from 'mockjs/src/mock/random/color_dict'
import { color } from 'mockjs/src/mock/random/color'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      background: true,
      list: null,
      listLoading: true,
      dialogFormVisible: false,
      dialogAddFormVisible: false,
      isLoading: false,
      orderList: [],
      productList: [],
      address: {},
      order: {}
    }
  },
  computed: {
    black() {
      return black
    },
    blue() {
      return blue
    },
    red() {
      return red
    }
  },
  created() {
    this.getUserOrder()
  },
  methods: {
    color,
    getUserOrder() {
      this.$store.dispatch('order/getOrders', {})
        .then((res) => {
          if (res.code === 0) {
            this.orderList = res.data
            this.listLoading = false
          } else {
            this.$message.error(res.msg)
          }
        })
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex >= 4 && columnIndex <= 6) {
        return {
          rowspan: 30000, // 合并三行
          colspan: 1
        }
      }
    },
    formatDate(isoDateString) {
      const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', timeZoneName: 'short' }
      const formattedDate = new Date(isoDateString).toLocaleDateString('en-US', options)
      return formattedDate
    }
  }
}
</script>
